<template>
	<view class="u-page__item">

		<up-popup :show="show" mode="center" :closeable="true" @close="close" :closeOnClickOverlay="true" :safeAreaInsetBottom="false"
			customStyle="border-radius: 24rpx; overflow: hidden;">
			<view class="popup-content">
				<text class="popup-title">添加备忘录</text>
				<view class="input-container">
					<uni-easyinput v-model="writeText" placeholder="记录重要事项..." suffixIcon="mic" :inputBorder="false"
						 class="memo-input" placeholderStyle="color: #a0a0a0;"></uni-easyinput>

					<button @click="postInput" class="submit-btn" :disabled="!writeText.trim()"
						:class="{ 'disabled-btn': !writeText.trim() }">
						<text class="btn-text">提交</text>
						<uni-icons type="paperplane" size="18" color="#fff"></uni-icons>
					</button>
				</view>
			</view>
		</up-popup>
		<up-gap height="150"></up-gap>

		<up-tabbar :value="activeIndex" @change="changeIndex" :fixed="true" :placeholder="true"
			:safeAreaInsetBottom="true">
			<up-tabbar-item text="备忘录" icon="order"></up-tabbar-item>
			<up-tabbar-item text="地图" icon="map"></up-tabbar-item>
			<up-tabbar-item text="" icon="plus" mode="midButton" @click="togglePopUp"></up-tabbar-item>
			<up-tabbar-item text="建议" icon="list"></up-tabbar-item>
			<up-tabbar-item text="我的" icon="account"></up-tabbar-item>
		</up-tabbar>
	</view>
</template>

<script>
	import {
		toast
	} from '@/uni_modules/uview-plus'
	import {
		tabBar
	} from '@/stores/tabBar'
	import {
		useMemoStore
	} from '@/stores/memoStore';

	export default {
		data() {
			return {
				writeText: '',
				tabBarStore: tabBar(),
				memoStore: useMemoStore(),
				
				// 防止由重复点击导致的重复提交
				isSubmiting: false
			}
		},
		computed: {
			activeIndex() {
				return this.tabBarStore.activeIndex
			},
			show() {
				return this.tabBarStore.showPopUp 
			}
		},
		methods: {
			// tabBar跳转 激活状态 实现
			changeIndex(index) {
				this.tabBarStore.changeIndex(index)
				const routes = [
					'/pages/memo/memo',
					'/pages/map/map',
					null,
					'/pages/advices/advices',
					'/pages/my/my'
				]
				if (routes[index]) {
					uni.switchTab({
						url: routes[index],
						success: () => console.log("跳转成功"),
						fail: (error) => console.log("跳转失败:", err)
					})
				}
			},

			// 中间按钮 触发 输入弹窗
			togglePopUp() {
				this.tabBarStore.togglePopUp(!this.show)
			},

			// 预留给： 关闭弹窗按钮
			close() {
				this.tabBarStore.togglePopUp(!this.show)
			},

			// 弹窗提交
			async postInput() {
				if(this.isSubmiting) return
				this.isSubmiting = true
				
				await this.memoStore.postInput(this.writeText)
				this.writeText = ''
				await this.memoStore.getMemoList()
				// 用于提交完后自动关闭弹窗
				this.tabBarStore.togglePopUp(!this.show)
				
				this.isSubmiting = false
			}
		}
	}
</script>

<style lang="scss">
	.u-page {
		padding: 0;

		&__item {
			&__slot-icon {
				width: 17px;
				height: 17px;
			}
		}
	}

	.popup-content {
		padding: 40rpx;
		width: 600rpx;
		background-color: #fff;
		border-radius: 24rpx;
		box-shadow: 0 10rpx 50rpx rgba(0, 0, 0, 0.1);
	}

	.popup-title {
		display: block;
		text-align: center;
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 40rpx;
	}

	.input-container {
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	.memo-input {
		::v-deep .uni-easyinput__content {
			min-height: 160rpx !important;
			border-radius: 16rpx !important;
			padding: 24rpx !important;
			box-shadow: inset 0 0 10rpx rgba(0, 0, 0, 0.05);
			transition: all 0.3s;

			&:focus-within {
				box-shadow: inset 0 0 15rpx rgba(0, 128, 255, 0.1),
					0 0 0 2rpx rgba(0, 128, 255, 0.3);
			}
		}

		::v-deep .uniui-mic {
			padding: 10rpx;
			background-color: #f0f7ff;
			border-radius: 50%;
			color: #1890ff;
		}
	}

	.submit-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		height: 90rpx;
		background: linear-gradient(45deg, #1890ff, #0077e6);
		color: #fff;
		border-radius: 16rpx;
		font-size: 32rpx;
		border: none;
		transition: all 0.3s;
		box-shadow: 0 6rpx 16rpx rgba(24, 144, 255, 0.3);

		&:active {
			transform: translateY(4rpx);
			box-shadow: 0 2rpx 8rpx rgba(24, 144, 255, 0.3);
		}

		.btn-text {
			font-weight: 500;
		}
	}

	.disabled-btn {
		opacity: 0.6 !important;
		background: #c0c0c0 !important;
		box-shadow: none !important;
		transform: none !important;
	}
</style>